<template>
  <div v-loading="loading" class="tab_content">
    <div class="hots_panel">
      <div class="recomm_title">
        {{ $t("recommender.recommender_user") }}
      </div>
      <div class="user_list">
        <div v-for="(item, index) in userList" :key="index">
          <SearchRecommenderUserItemComponents :userData="item" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SearchRecommenderUserItemComponents from "@/components/Search/SearchRecommenderUserItemComponents.vue";
//获取统一请求接口
import { getRecommendUserList } from "@/api";

export default {
  name: "SearchTabRecommenderUser",
  components: {
    SearchRecommenderUserItemComponents,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      loading: true,
      UserInfo: {
        user_id: JSON.parse(localStorage.getItem("user")).user_id,
      },
      userList: null,
    };
  },
  mounted() {
    this.loadingData();
  },
  methods: {
    loadingData() {
      setTimeout(() => {
        this.getRecommenderUserList();
        this.loading = false;
      }, 500);
    },
    async getRecommenderUserList() {
      let res = await getRecommendUserList(this.UserInfo);
      if (res.state == 200) {
        this.userList = res.data;
      }
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tab_content {
  display: flex;
}
.hots_panel {
  width: 100%;
  padding: 10px 10px;
  height: 1200px;
}

.recomm_title {
  padding: 16px 10px;
}

.user_list {
  padding: 16px 10px;
}
</style>